<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>珠峰架构师成长计划</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            珠峰架构师成长计划
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li class="active"><a href="../html/30.cms-10-front.html">30.cms-10-front</a></li><li><a href="../html/30.cms-11-deploy.html">30.cms-11-deploy</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/54.linux.html">54.linux</a></li><li><a href="../html/55.yaml.html">55.yaml</a></li><li><a href="../html/50.ketang2.html">50.ketang2</a></li><li><a href="../html/56.ts.html">56.ts</a></li><li><a href="../html/57.ts_react.html">57.ts_react</a></li><li><a href="../html/58.react-ssr.html">58.react-ssr</a></li><li><a href="../html/59.react-ssr.html">59.react-ssr</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01. 初始化项目">1. 初始化项目</a></li><li><a href="#t12. 配置代理">2. 配置代理</a></li><li><a href="#t23. 注册登录">3. 注册登录</a><ul><li><a href="#t33.1 login/index.js">3.1 login/index.js</a></li><li><a href="#t43.2 utils/request.js">3.2 utils/request.js</a></li><li><a href="#t53.3  models/login.js">3.3  models/login.js</a></li><li><a href="#t63.4 login/services/login.js">3.4 login/services/login.js</a></li></ul></li><li><a href="#t74.验证码">4.验证码</a><ul><li><a href="#t84.1 login/index.js">4.1 login/index.js</a></li></ul></li><li><a href="#t95.后台管理界面布局模版">5.后台管理界面布局模版</a><ul><li><a href="#t105.1 /admin/_layout.js">5.1 /admin/_layout.js</a></li></ul></li><li><a href="#t116. 顶部导航条">6. 顶部导航条</a><ul><li><a href="#t126.1 src/components/AdminHeader.js">6.1 src/components/AdminHeader.js</a></li><li><a href="#t136.2 src/global.less">6.2 src/global.less</a></li><li><a href="#t146.3 admin/_layout.js">6.3 admin/_layout.js</a></li></ul></li><li><a href="#t157.左侧菜单和用户页面">7.左侧菜单和用户页面</a><ul><li><a href="#t167.1 components/MenuList.js">7.1 components/MenuList.js</a></li><li><a href="#t177.2 admin/_layout.js">7.2 admin/_layout.js</a></li></ul></li><li><a href="#t187. 用户管理">7. 用户管理</a><ul><li><a href="#t197.1 src/utils/request.js">7.1 src/utils/request.js</a></li><li><a href="#t207.2 admin/user/index.js">7.2 admin/user/index.js</a></li><li><a href="#t217.3 /user/constants.js">7.3 /user/constants.js</a></li><li><a href="#t227.4 /user/models/user.js">7.4 /user/models/user.js</a></li><li><a href="#t237.5 user/services/user.js">7.5 user/services/user.js</a></li></ul></li><li><a href="#t248. 全部删除">8. 全部删除</a><ul><li><a href="#t258.1 user/index.js">8.1 user/index.js</a></li><li><a href="#t268.2 user/models/user.js">8.2 user/models/user.js</a></li><li><a href="#t278.3 user/services/user.js">8.3 user/services/user.js</a></li></ul></li><li><a href="#t289. 搜索">9. 搜索</a><ul><li><a href="#t299.1 admin/user/index.js">9.1 admin/user/index.js</a></li><li><a href="#t309.2 user/models/user.js">9.2 user/models/user.js</a></li><li><a href="#t319.3 user/services/user.js">9.3 user/services/user.js</a></li></ul></li><li><a href="#t3210. 点击选择行">10. 点击选择行</a><ul><li><a href="#t3310.1 admin/user/index.js">10.1 admin/user/index.js</a></li></ul></li><li><a href="#t3411. 角色管理">11. 角色管理</a><ul><li><a href="#t3511.1 /role/index.js">11.1 /role/index.js</a></li><li><a href="#t3611.2 /role/models/role.js">11.2 /role/models/role.js</a></li><li><a href="#t3711.3 admin/role/services/role.js">11.3 admin/role/services/role.js</a></li></ul></li><li><a href="#t3812. 设置权限">12. 设置权限</a><ul><li><a href="#t3912.1 role/index.js">12.1 role/index.js</a></li><li><a href="#t4012.2 models/role.js">12.2 models/role.js</a></li><li><a href="#t4112.3 services/role.js">12.3 services/role.js</a></li></ul></li><li><a href="#t4213.给角色加用户">13.给角色加用户</a><ul><li><a href="#t4313.1 roles/page.js">13.1 roles/page.js</a></li><li><a href="#t4413.2 models/roles.js">13.2 models/roles.js</a></li><li><a href="#t4513.3 services/roles.js">13.3 services/roles.js</a></li></ul></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h2 id="t01. &#x521D;&#x59CB;&#x5316;&#x9879;&#x76EE;">1. &#x521D;&#x59CB;&#x5316;&#x9879;&#x76EE; <a href="#t01. &#x521D;&#x59CB;&#x5316;&#x9879;&#x76EE;"> # </a></h2>
<pre><code class="lang-js">$ npm install dva-cli -g
$ dva -v
dva-cli version <span class="hljs-number">0.9</span><span class="hljs-number">.1</span>
$ dva <span class="hljs-keyword">new</span> cms201807
$ cd cms201807
$ cnpm i styled-components -S
$ npm start
</code></pre>
<h2 id="t12. &#x914D;&#x7F6E;&#x4EE3;&#x7406;">2. &#x914D;&#x7F6E;&#x4EE3;&#x7406; <a href="#t12. &#x914D;&#x7F6E;&#x4EE3;&#x7406;"> # </a></h2>
<p>.webpackrc.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> {resolve}=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-string">&quot;alias&quot;</span>:{
        <span class="hljs-string">&quot;@&quot;</span>:resolve(<span class="hljs-string">&quot;src&quot;</span>)
    }
}
</code></pre>
<h2 id="t23. &#x6CE8;&#x518C;&#x767B;&#x5F55;">3. &#x6CE8;&#x518C;&#x767B;&#x5F55; <a href="#t23. &#x6CE8;&#x518C;&#x767B;&#x5F55;"> # </a></h2>
<h3 id="t33.1 login/index.js">3.1 login/index.js <a href="#t33.1 login/index.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {Layout,Form,Icon,Input,Button,Checkbox,Cascader,Select,Row,Col,AutoComplete,message} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> styled <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;styled-components&apos;</span>;
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">const</span> {Footer,Content}=Layout;
<span class="hljs-keyword">const</span> Option=Select.Option;
<span class="hljs-keyword">const</span> AutoCompleteOption = AutoComplete.Option;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    handleSubmit=<span class="hljs-function"><span class="hljs-params">event</span> =&gt;</span> {
        event.preventDefault();
        <span class="hljs-keyword">this</span>.userForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (err) {
                    message.error(<span class="hljs-string">&apos;&#x8F93;&#x5165;&#x4E0D;&#x5408;&#x6CD5;!&apos;</span>);
                } <span class="hljs-keyword">else</span> {
                    <span class="hljs-keyword">this</span>.props.dispatch({
                        <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isLogin?<span class="hljs-string">&apos;login/login&apos;</span>:<span class="hljs-string">&apos;login/signup&apos;</span>,
                        <span class="hljs-attr">payload</span>:values
                    });
                }
        });
    }
    changeLoginStatus=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>:<span class="hljs-string">&apos;login/changeLoginStatus&apos;</span>
        });
    }
    render() {
        <span class="hljs-keyword">return</span> (
            &lt;Layout&gt;
                &lt;Content&gt;
                    &lt;WrappedLoginForm
                        isLogin={this.props.isLogin}
                        handleSubmit={this.handleSubmit}
                        wrappedComponentRef={inst =&gt; this.userForm=inst}
                        changeLoginStatus={this.changeLoginStatus}
                        errorInfo={this.props.errorInfo}
                    /&gt;
                &lt;/Content&gt;
                &lt;Footer style={{ textAlign: &apos;center&apos; }}&gt; &#x73E0;&#x5CF0;&#x57F9;&#x8BAD; &#xA9;2018&lt;/Footer&gt;
            &lt;/Layout&gt;
       )
   }
}

export default connect(
    state =&gt; ({
        ...state.login,
        loading:state.loading.models.login
    })
)(Login);

class LoginForm extends Component{
    state={autoCompleteResult:[],confirmDirty:false}
    handleWebsiteChange=(value) =&gt; {
        let autoCompleteResult;
        if (value) {
            autoCompleteResult=[&apos;.com&apos;,&apos;.cn&apos;,&apos;.org&apos;].map(domain=&gt;`${value}${domain}`);
        } else {
            autoCompleteResult=[];
        }
        this.setState({autoCompleteResult});
    }
    handleConfirmBlur = (e) =&gt; {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
      }

    compareToFirstPassword=(rule,value,callback) =&gt; {
        const form=this.props.form;
        if (value &amp;&amp; value !== form.getFieldValue(&apos;password&apos;)) {
            callback(&apos;&#x5BC6;&#x7801;&#x4E0D;&#x5339;&#x914D;&apos;);
        } else {
            callback();
        }
    }
    validateToNextPassword=(rule,value,callback) =&gt; {
        const form=this.props.form;
        if (value&amp;&amp;this.state.confirmDirty) {
            form.validateFields([&apos;confirm&apos;],{force:true});
        }
        callback();
    }
    render() {
        const {form: {getFieldDecorator},isLogin,handleSubmit}=this.props;
        const formItemLayout={
            labelCol:{
                span:4
            },
            wrapperCol: {
                span:20
            }

        }
        const tailFormItemLayout={
            wrapperCol: {
                span: 20,
                offset:4
            }
        }
        const addresses=[
            {
                value:&apos;guangdong&apos;,
                label: &apos;&#x5E7F;&#x4E1C;&apos;,
                children: [
                    {
                        value:&apos;guangzhou&apos;,
                        label: &apos;&#x5E7F;&#x5DDE;&apos;,
                    },
                    {
                        value:&apos;dongguan&apos;,
                        label: &apos;&#x4E1C;&#x839E;&apos;,
                    }
                ]
            },
            {
                value:&apos;shandong&apos;,
                label: &apos;&#x5C71;&#x4E1C;&apos;,
                children: [
                    {
                        value:&apos;jinan&apos;,
                        label: &apos;&#x6D4E;&#x5357;&apos;,
                    },
                    {
                        value:&apos;shouguang&apos;,
                        label: &apos;&#x5BFF;&#x5149;&apos;,
                    }
                ]
            }
        ]
        const countrySelector=getFieldDecorator(&apos;prefix&apos;,{initialValue: &apos;86&apos;})(
            &lt;Select style={{width: 70}}&gt;
                &lt;Option value=&quot;86&quot;&gt;+86&lt;/Option&gt;
                &lt;Option value=&quot;87&quot;&gt;+87&lt;/Option&gt;
            &lt;/Select&gt;
        );
        const websiteOptions=this.state.autoCompleteResult.map(website =&gt; (
            &lt;AutoCompleteOption key={website}&gt;{website}&lt;/AutoCompleteOption&gt;
        ));
        return (
            &lt;FormWrapper&gt;
              &lt;Form onSubmit={handleSubmit} style={{width:isLogin?&apos;300px&apos;:&apos;500px&apos;}}&gt;
                &lt;h3&gt;&#x6B22;&#x8FCE;&#x6CE8;&#x518C;&lt;/h3&gt;
                &lt;FormItem label=&quot;&#x7528;&#x6237;&#x540D;&quot; {...formItemLayout}&gt;
                            {
                                getFieldDecorator(&apos;username&apos;,{
                                    rules:[{required:true,message:&apos;&#x8BF7;&#x8F93;&#x5165;&#x4F60;&#x7684;&#x7528;&#x6237;&#x540D;&apos;}]
                                })(&lt;Input prefix={&lt;Icon type=&quot;user&quot; style={{color:&apos;rbga(0,0,0,.25)&apos;}}/&gt;} placeholder=&quot;&#x7528;&#x6237;&#x540D;&quot;/&gt;)
                            }
                &lt;/FormItem&gt;
                &lt;FormItem label=&quot;&#x5BC6;&#x7801;&quot; {...formItemLayout}&gt;
                            {
                                getFieldDecorator(&apos;password&apos;,{
                            rules: [{required: true,message: &apos;&#x8BF7;&#x8F93;&#x5165;&#x4F60;&#x7684;&#x5BC6;&#x7801;&apos;},
                                {validator:this.validateToNextPassword}
                                ]
                                })(&lt;Input prefix={&lt;Icon type=&quot;lock&quot; style={{color:&apos;rbga(0,0,0,.25)&apos;}}/&gt;} placeholder=&quot;&#x5BC6;&#x7801;&quot;/&gt;)
                            }
                    &lt;/FormItem&gt;
                {
                        !isLogin&amp;&amp;(
                            &lt;FormItem label=&quot;&#x786E;&#x8BA4;&#x5BC6;&#x7801;&quot; {...formItemLayout}&gt;
                            {
                                getFieldDecorator(&apos;confirm&apos;,{
                            rules: [{required: true,message: &apos;&#x8BF7;&#x8F93;&#x5165;&#x4F60;&#x7684;&#x786E;&#x8BA4;&#x5BC6;&#x7801;&apos;},
                                {validator:this.compareToFirstPassword}
                                ]
                                })(&lt;Input prefix={&lt;Icon type=&quot;lock&quot; style={{color:&apos;rbga(0,0,0,.25)&apos;}}/&gt;} placeholder=&quot;&#x786E;&#x8BA4;&#x5BC6;&#x7801;&quot;/&gt;)
                            }
                          &lt;/FormItem&gt;
                        )
                }
                {
                        !isLogin&amp;&amp;(
                            &lt;FormItem label=&quot;&#x90AE;&#x7BB1;&quot; {...formItemLayout}&gt;
                            {
                                getFieldDecorator(&apos;email&apos;,{
                            rules: [{type:&apos;email&apos;,message:&apos;&#x5FC5;&#x987B;&#x8F93;&#x5165;&#x5408;&#x6CD5;&#x7684;&#x90AE;&#x7BB1;&#x5730;&#x5740;&apos;},{required:true,message:&apos;&#x8BF7;&#x8F93;&#x5165;&#x90AE;&#x7BB1;&apos;}]
                                })(&lt;Input prefix={&lt;Icon type=&quot;mail&quot; style={{color:&apos;rbga(0,0,0,.25)&apos;}}/&gt;} placeholder=&quot;&#x5BC6;&#x7801;&quot;/&gt;)
                            }
                           &lt;/FormItem&gt;
                        )
                    }
                {
                        !isLogin&amp;&amp;(
                            &lt;FormItem label=&quot;&#x4F4F;&#x5740;&quot; {...formItemLayout}&gt;
                            {
                               getFieldDecorator(&apos;address&apos;,{
                                 initialValue:[&quot;guangdong&quot;,&quot;guangzhou&quot;],
                                 rules: [{type:&apos;array&apos;,required:true,message:&apos;&#x5FC5;&#x987B;&#x8F93;&#x5165;&#x5408;&#x6CD5;&#x7684;&#x5730;&#x5740;&apos;}]
                                })(&lt;Cascader options={addresses}/&gt;)
                            }
                          &lt;/FormItem&gt;
                        )
                }
                {
                        !isLogin&amp;&amp;(
                            &lt;FormItem label=&quot;&#x624B;&#x673A;&#x53F7;&quot; {...formItemLayout}&gt;
                            {
                               getFieldDecorator(&apos;phone&apos;,{
                                 rules: [{required:true,message:&apos;&#x5FC5;&#x987B;&#x8F93;&#x5165;&#x5408;&#x6CD5;&#x7684;&#x624B;&#x673A;&#x53F7;&apos;}]
                               })(&lt;Input addonBefore={countrySelector} style={{width:&apos;100%&apos;}}/&gt;)
                            }
                           &lt;/FormItem&gt;
                        )
                }
                {
                        !isLogin&amp;&amp;(
                            &lt;FormItem label=&quot;&#x4E2A;&#x4EBA;&#x4E3B;&#x9875;&quot; {...formItemLayout}&gt;
                            {
                               getFieldDecorator(&apos;website&apos;,{
                                 rules: [{required:true,message:&apos;&#x5FC5;&#x987B;&#x8F93;&#x5165;&#x5408;&#x6CD5;&#x7684;&#x7F51;&#x5740;&apos;}]
                            })(
                                &lt;AutoComplete
                                dataSource={websiteOptions}
                                onChange={this.handleWebsiteChange}
                                placeholder=&quot;&#x7F51;&#x5740;&quot;
                                &gt;
                                    &lt;Input/&gt;
                                &lt;/AutoComplete&gt;
                            )
                                }
                            &lt;/FormItem&gt;
                        )
                }
                {
                        !isLogin&amp;&amp;(
                            &lt;FormItem label=&quot;&#x9A8C;&#x8BC1;&#x7801;&quot; {...formItemLayout} extra=&quot;&#x8BC1;&#x660E;&#x4F60;&#x4E0D;&#x662F;&#x673A;&#x5668;&#x4EBA;&quot;&gt;
                              &lt;Row gutter={8}&gt;
                                &lt;Col span={12}&gt;
                                {
                                       getFieldDecorator(&apos;captcha&apos;,{
                                         rules: [{required:true,message:&apos;&#x5FC5;&#x987B;&#x8F93;&#x5165;&#x9A8C;&#x8BC1;&#x7801;&apos;}]
                                   })(&lt;Input /&gt;)
                                }
                                &lt;/Col&gt;
                                &lt;Col span={12}&gt;
                                    &lt;Button&gt;&#x83B7;&#x53D6;&#x9A8C;&#x8BC1;&#x7801;&lt;/Button&gt;
                                &lt;/Col&gt;
                              &lt;/Row&gt;
                           &lt;/FormItem&gt;
                        )
                    }
                {
                        !isLogin&amp;&amp;(
                            &lt;FormItem {...tailFormItemLayout}&gt;
                                {getFieldDecorator(&apos;agreement&apos;, {
                                    valuePropName: &apos;checked&apos;,
                                })(
                                    &lt;Checkbox&gt;&#x6211;&#x5DF2;&#x7ECF;&#x9605;&#x8BFB;&#x5E76;&#x540C;&#x610F; &lt;a href=&quot;&quot;&gt;&#x534F;&#x8BAE;&lt;/a&gt;&lt;/Checkbox&gt;
                                )}
                            &lt;/FormItem&gt;
                        )
                }
                {
                        isLogin?(&lt;FormItem&gt;
                                    &lt;Button type=&quot;primary&quot; htmlType=&quot;submit&quot; style={{width:&apos;100%&apos;}}&gt;&#x767B;&#x5F55;&lt;/Button&gt;
                                        &#x6CA1;&#x6709;&#x8D26;&#x53F7;? &lt;a href=&quot;#&quot; onClick={this.props.changeLoginStatus}&gt;&#x7ACB;&#x523B;&#x6CE8;&#x518C;!&lt;/a&gt;
                                    &lt;/FormItem&gt;):(
                                &lt;FormItem&gt;
                               &lt;Button type=&quot;primary&quot; htmlType=&quot;submit&quot; style={{width:&apos;100%&apos;}}&gt;&#x6CE8;&#x518C;&lt;/Button&gt;
                            &#x5DF2;&#x6709;&#x8D26;&#x53F7;? &lt;a href=&quot;#&quot; onClick={this.props.changeLoginStatus}&gt;&#x7ACB;&#x5373;&#x767B;&#x5F55;!&lt;/a&gt;
                                &lt;/FormItem&gt;
                        )
                }
                &lt;/Form&gt;
            &lt;/FormWrapper&gt;

        )
  }
}
const WrappedLoginForm = Form.create()(LoginForm);
const FormWrapper=styled.div`
   display:flex;
   justify-content:center;
   align-items:center;
   height:calc(100vh - 70px);
   h3 {
    text-align:center;
   }
   form {
       border:1px solid #999;
       border-radius:5px;
       padding:20px;
   }
`
</code></pre>
<h3 id="t43.2 utils/request.js">3.2 utils/request.js <a href="#t43.2 utils/request.js"> # </a></h3>
<p>src/utils/request.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> fetch <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/fetch&apos;</span>;
<span class="hljs-keyword">const</span> BaseURL=<span class="hljs-string">&apos;http://127.0.0.1:7001&apos;</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">parseJSON</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">return</span> response.json();
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkStatus</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">if</span> (response.status &gt;= <span class="hljs-number">200</span> &amp;&amp; response.status &lt; <span class="hljs-number">300</span>) {
    <span class="hljs-keyword">return</span> response;
  }

  <span class="hljs-keyword">const</span> error = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(response.statusText);
  error.response = response;
  <span class="hljs-keyword">throw</span> error;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkCode</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">if</span> (response.code === <span class="hljs-number">0</span>) {
    <span class="hljs-keyword">return</span> response.data;
  }
  <span class="hljs-keyword">const</span> error = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(response.error);
  error.response = response;
  <span class="hljs-keyword">throw</span> error;
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">request</span>(<span class="hljs-params">url,options={}</span>) </span>{
  <span class="hljs-keyword">let</span> token=localStorage.getItem(<span class="hljs-string">&apos;token&apos;</span>);
  <span class="hljs-keyword">if</span> (token) {
    options.headers=options.headers||{};
    options.headers.authorization=token;
  }
  options.credentials=<span class="hljs-string">&quot;include&quot;</span>;
  <span class="hljs-keyword">return</span> fetch(<span class="hljs-string">`<span class="hljs-subst">${BaseURL}</span><span class="hljs-subst">${url}</span>`</span>, options)
  .then(checkStatus)
  .then(parseJSON)
  .then(checkCode)
  .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> ({ err }));
}

</code></pre>
<h3 id="t53.3  models/login.js">3.3  models/login.js <a href="#t53.3  models/login.js"> # </a></h3>
<p>src/pages/login/models/login.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> service <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/login&apos;</span>;
<span class="hljs-keyword">import</span> {routerRedux} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">import</span> {decode} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;jsonwebtoken&apos;</span>;
<span class="hljs-keyword">const</span> entity=<span class="hljs-string">&apos;login&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>:entity,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">isLogin</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">errorInfo</span>: <span class="hljs-string">&apos;&apos;</span>,
        <span class="hljs-attr">userInfo</span>:<span class="hljs-literal">null</span>
    },

    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname == <span class="hljs-string">&apos;/login&apos;</span>) {

                } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (pathname == <span class="hljs-string">&apos;/signup&apos;</span>) {

                }
            });
        }
    },
    <span class="hljs-attr">effects</span>: {
        *signup({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.signup,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;changeLoginStatus&apos;</span>});
        },
        *login({payload},{call,put}) {
            <span class="hljs-keyword">const</span> token=<span class="hljs-keyword">yield</span> call(service.login,payload);
            <span class="hljs-keyword">const</span> user = decode(token);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;setUserInfo&apos;</span>,<span class="hljs-attr">payload</span>:user});
            localStorage.setItem(<span class="hljs-string">&apos;token&apos;</span>,token);
            <span class="hljs-keyword">yield</span> put(routerRedux.push(<span class="hljs-string">&apos;/admin&apos;</span>));
        },
        *loadUser({payload},{call,put}) {
            <span class="hljs-keyword">let</span> token=localStorage.getItem(<span class="hljs-string">&apos;token&apos;</span>);
            <span class="hljs-keyword">if</span> (token) {
                <span class="hljs-keyword">const</span> user = decode(token);
                <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;setUserInfo&apos;</span>,<span class="hljs-attr">payload</span>:user});
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">yield</span> put(routerRedux.push(<span class="hljs-string">&apos;/login&apos;</span>));
            }
        }
    },

    <span class="hljs-attr">reducers</span>: {
        <span class="hljs-comment">//&#x4FEE;&#x6539;&#x662F;&#x767B;&#x5F55;&#x8FD8;&#x662F;&#x6CE8;&#x518C;&#x7684;&#x72B6;&#x6001;</span>
        changeLoginStatus(state, action) {
           <span class="hljs-keyword">return</span> { ...state,  <span class="hljs-attr">isLogin</span>:!state.isLogin};
        },
        setErrorInfo(state,{payload}) {
            <span class="hljs-keyword">return</span> { ...state,  <span class="hljs-attr">errorInfo</span>:payload};
        },
        setUserInfo(state,{payload}) {
            <span class="hljs-keyword">return</span> { ...state,  <span class="hljs-attr">userInfo</span>:payload};
        }
    },

  };
</code></pre>
<h3 id="t63.4 login/services/login.js">3.4 login/services/login.js <a href="#t63.4 login/services/login.js"> # </a></h3>
<p>src/pages/login/services/login.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> request <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../../utils/request&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">signup</span>(<span class="hljs-params">values</span>) </span>{
  <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/signup`</span>,{
    <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
    <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
    <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
  });
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">login</span>(<span class="hljs-params">values</span>) </span>{
  <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/login`</span>,{
    <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
    <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
    <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
  });
}
</code></pre>
<h2 id="t74.&#x9A8C;&#x8BC1;&#x7801;">4.&#x9A8C;&#x8BC1;&#x7801; <a href="#t74.&#x9A8C;&#x8BC1;&#x7801;"> # </a></h2>
<h3 id="t84.1 login/index.js">4.1 login/index.js <a href="#t84.1 login/index.js"> # </a></h3>
<p>src/pages/login/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> captchaUrl=<span class="hljs-string">`http://127.0.0.1:7001/captcha?ts=`</span>;
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">FormItem</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;&#x9A8C;&#x8BC1;&#x7801;&quot;</span> {<span class="hljs-attr">...formItemLayout</span>} <span class="hljs-attr">extra</span>=<span class="hljs-string">&quot;&#x8BC1;&#x660E;&#x4F60;&#x4E0D;&#x662F;&#x673A;&#x5668;&#x4EBA;&quot;</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">Row</span> <span class="hljs-attr">gutter</span>=<span class="hljs-string">{8}</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{12}</span>&gt;</span>
              {
                  getFieldDecorator(&apos;captcha&apos;,{
                      rules: [{required:true,message:&apos;&#x5FC5;&#x987B;&#x8F93;&#x5165;&#x9A8C;&#x8BC1;&#x7801;&apos;}]
                  })(<span class="hljs-tag">&lt;<span class="hljs-name">Input</span> /&gt;</span>)
              }
          <span class="hljs-tag">&lt;/<span class="hljs-name">Col</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">Col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">{12}</span>&gt;</span>
                 <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{captchaUrl}</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.refreshCaptcha}/</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-name">Col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">Row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">FormItem</span>&gt;</span>
</span></code></pre>
<h2 id="t95.&#x540E;&#x53F0;&#x7BA1;&#x7406;&#x754C;&#x9762;&#x5E03;&#x5C40;&#x6A21;&#x7248;">5.&#x540E;&#x53F0;&#x7BA1;&#x7406;&#x754C;&#x9762;&#x5E03;&#x5C40;&#x6A21;&#x7248; <a href="#t95.&#x540E;&#x53F0;&#x7BA1;&#x7406;&#x754C;&#x9762;&#x5E03;&#x5C40;&#x6A21;&#x7248;"> # </a></h2>
<h3 id="t105.1 /admin/_layout.js">5.1 /admin/_layout.js <a href="#t105.1 /admin/_layout.js"> # </a></h3>
<p>src/pages/admin/_layout.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> { Layout } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">const</span> { Header, Footer, Sider, Content } = Layout;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Admin</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Layout</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Header</span>&gt;</span>Header<span class="hljs-tag">&lt;/<span class="hljs-name">Header</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Layout</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">Sider</span>&gt;</span>Sider<span class="hljs-tag">&lt;/<span class="hljs-name">Sider</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">Content</span>&gt;</span>Content<span class="hljs-tag">&lt;/<span class="hljs-name">Content</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">Layout</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Footer</span>&gt;</span>
                   &#x73E0;&#x5CF0;&#x57F9;&#x8BAD; &#xA9;2018
                <span class="hljs-tag">&lt;/<span class="hljs-name">Footer</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">Layout</span>&gt;</span></span>
       )
   }
}
</code></pre>
<h2 id="t116. &#x9876;&#x90E8;&#x5BFC;&#x822A;&#x6761;">6. &#x9876;&#x90E8;&#x5BFC;&#x822A;&#x6761; <a href="#t116. &#x9876;&#x90E8;&#x5BFC;&#x822A;&#x6761;"> # </a></h2>
<h3 id="t126.1 src/components/AdminHeader.js">6.1 src/components/AdminHeader.js <a href="#t126.1 src/components/AdminHeader.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {Layout} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">const</span> {Header}=Layout;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AdminHeader</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
  componentWillMount() {
      <span class="hljs-keyword">this</span>.props.dispatch({
          <span class="hljs-attr">type</span>:<span class="hljs-string">&apos;login/loadUser&apos;</span>
      });
  }
  render() {
    <span class="hljs-keyword">let</span> {userInfo}=<span class="hljs-keyword">this</span>.props;
      <span class="hljs-keyword">return</span> (
        <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Header</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;logo&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;http://img.zhufengpeixun.cn/zfpxlogo.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;logo&quot;</span>/&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;welcome&quot;</span>&gt;</span>&#x6B22;&#x8FCE;&#x767B;&#x5F55; {userInfo&amp;&amp;userInfo.username}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">Header</span>&gt;</span>
      )
  }
}
export default connect(
  state =&gt; state.login
)(AdminHeader);

</span></code></pre>
<h3 id="t136.2 src/global.less">6.2 src/global.less <a href="#t136.2 src/global.less"> # </a></h3>
<p>src/global.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.ant-layout</span> <span class="hljs-selector-class">.ant-layout-header</span> {
  <span class="hljs-selector-class">.logo</span>{
      <span class="hljs-attribute">width</span>:<span class="hljs-number">120px</span>;
      <span class="hljs-attribute">height</span>:<span class="hljs-number">32px</span>;
      <span class="hljs-attribute">margin</span>:<span class="hljs-number">16px</span>;
      <span class="hljs-attribute">float</span>:left;
  }
  <span class="hljs-selector-class">.welcome</span>{
      <span class="hljs-attribute">float</span>:right;
      <span class="hljs-attribute">color</span>:<span class="hljs-number">#FFF</span>;
  }
}
</code></pre>
<h3 id="t146.3 admin/_layout.js">6.3 admin/_layout.js <a href="#t146.3 admin/_layout.js"> # </a></h3>
<p>src/pages/admin/_layout.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> { Layout } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> AdminHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/AdminHeader&apos;</span>;
<span class="hljs-keyword">const</span> {Footer,Sider,Content}=Layout;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Admin</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Layout</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">AdminHeader</span>/&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Layout</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">Sider</span>&gt;</span>Sider<span class="hljs-tag">&lt;/<span class="hljs-name">Sider</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">Content</span>&gt;</span>Content<span class="hljs-tag">&lt;/<span class="hljs-name">Content</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">Layout</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Footer</span>&gt;</span>
                   &#x73E0;&#x5CF0;&#x57F9;&#x8BAD; &#xA9;2018
                <span class="hljs-tag">&lt;/<span class="hljs-name">Footer</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">Layout</span>&gt;</span></span>
       )
   }
}
</code></pre>
<h2 id="t157.&#x5DE6;&#x4FA7;&#x83DC;&#x5355;&#x548C;&#x7528;&#x6237;&#x9875;&#x9762;">7.&#x5DE6;&#x4FA7;&#x83DC;&#x5355;&#x548C;&#x7528;&#x6237;&#x9875;&#x9762; <a href="#t157.&#x5DE6;&#x4FA7;&#x83DC;&#x5355;&#x548C;&#x7528;&#x6237;&#x9875;&#x9762;"> # </a></h2>
<h3 id="t167.1 components/MenuList.js">7.1 components/MenuList.js <a href="#t167.1 components/MenuList.js"> # </a></h3>
<p>src/components/MenuList.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {Menu,Icon} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> Link <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;umi/link&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">const</span> SubMenu=Menu.SubMenu;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MenuList</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    renderMenus=<span class="hljs-function">(<span class="hljs-params">resources=[]</span>) =&gt;</span> {
        <span class="hljs-keyword">return</span> resources.map(<span class="hljs-function"><span class="hljs-params">resource</span> =&gt;</span> {
            <span class="hljs-keyword">if</span> (resource.children.length&gt;<span class="hljs-number">0</span>) {
                <span class="hljs-keyword">return</span> (
                    &lt;SubMenu key={resource.key} title={&lt;span&gt;&lt;Icon type={resource.icon} /&gt;{resource.name}&lt;/span&gt;}&gt;
                        {this.renderMenus(resource.children)}
                    &lt;/SubMenu&gt;
                )    
            } else {
                return &lt;Menu.Item key={resource.key}&gt;&lt;Link to={resource.key}&gt;&lt;Icon type={resource.icon} /&gt;{resource.name}&lt;/Link&gt;&lt;/Menu.Item&gt;;
            }
        });
    }
    render() {
        let {userInfo}=this.props;
        if (!userInfo)
            return null;
        return (
            &lt;Menu
                theme=&quot;dark&quot;
                defaultSelectedKeys={[&apos;/admin&apos;]}
                defaultOpenKeys={[&apos;/admin&apos;]}
                mode=&quot;inline&quot;
            &gt;
                {
                    this.renderMenus(userInfo.resources)
                }
            &lt;/Menu&gt;
        )
    }
}
export default connect(
    state =&gt; state.login
  )(MenuList);
</code></pre>
<h3 id="t177.2 admin/_layout.js">7.2 admin/_layout.js <a href="#t177.2 admin/_layout.js"> # </a></h3>
<p>src/pages/admin/_layout.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> { Layout } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> AdminHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/AdminHeader&apos;</span>;
<span class="hljs-keyword">import</span> MenuList <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/MenuList&apos;</span>;
<span class="hljs-keyword">const</span> {Footer,Sider,Content}=Layout;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Admin</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Layout</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">AdminHeader</span>/&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Layout</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">Sider</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">MenuList</span>/&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Sider</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">Content</span>&gt;</span>
                        {this.props.children}
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Content</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">Layout</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Footer</span>&gt;</span>
                   &#x73E0;&#x5CF0;&#x57F9;&#x8BAD; &#xA9;2018
                <span class="hljs-tag">&lt;/<span class="hljs-name">Footer</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">Layout</span>&gt;</span></span>
       )
   }
}
</code></pre>
<h2 id="t187. &#x7528;&#x6237;&#x7BA1;&#x7406;">7. &#x7528;&#x6237;&#x7BA1;&#x7406; <a href="#t187. &#x7528;&#x6237;&#x7BA1;&#x7406;"> # </a></h2>
<h3 id="t197.1 src/utils/request.js">7.1 src/utils/request.js <a href="#t197.1 src/utils/request.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> fetch <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/fetch&apos;</span>;
<span class="hljs-keyword">const</span> BaseURL=<span class="hljs-string">&apos;http://127.0.0.1:7001&apos;</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">parseJSON</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">return</span> response.json();
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkStatus</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">if</span> (response.status &gt;= <span class="hljs-number">200</span> &amp;&amp; response.status &lt; <span class="hljs-number">300</span>) {
    <span class="hljs-keyword">return</span> response;
  }

  <span class="hljs-keyword">const</span> error = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(response.statusText);
  error.response = response;
  <span class="hljs-keyword">throw</span> error;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkCode</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">if</span> (response.code === <span class="hljs-number">0</span>) {
    <span class="hljs-keyword">return</span> response.data;
  }
  <span class="hljs-keyword">const</span> error = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(response.error);
  error.response = response;
  <span class="hljs-keyword">throw</span> error;
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">request</span>(<span class="hljs-params">url,options={}</span>) </span>{
  <span class="hljs-keyword">let</span> token=localStorage.getItem(<span class="hljs-string">&apos;token&apos;</span>);
  <span class="hljs-keyword">if</span> (token) {
    options.headers=options.headers||{};
    options.headers.authorization=token;
  }
  options.credentials=<span class="hljs-string">&quot;include&quot;</span>;
  <span class="hljs-keyword">return</span> fetch(<span class="hljs-string">`<span class="hljs-subst">${BaseURL}</span><span class="hljs-subst">${url}</span>`</span>, options)
  .then(checkStatus)
  .then(parseJSON)
  .then(checkCode)
  .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> ({ err }));
}
</code></pre>
<h3 id="t207.2 admin/user/index.js">7.2 admin/user/index.js <a href="#t207.2 admin/user/index.js"> # </a></h3>
<p>src/pages/admin/user/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message,Popconfirm} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./constants&apos;</span>;
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state.user,<span class="hljs-attr">loading</span>:state.loading.models.user})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">user</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;user/save&apos;</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEdit=<span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">false</span>,record});
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isCreate?<span class="hljs-string">&apos;user/create&apos;</span>:<span class="hljs-string">&apos;user/update&apos;</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    onDel=<span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;user/del&apos;</span>,
            <span class="hljs-attr">payload</span>:id
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;username&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;username&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;email&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x6027;&#x522B;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;gender&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;gender&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>)=&gt;</span>(
                    val==<span class="hljs-number">1</span>?<span class="hljs-string">&apos;&#x7537;&apos;</span>:<span class="hljs-string">&apos;&#x5973;&apos;</span>
                )
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Fragment</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.onEdit(record)}&gt;&#x7F16;&#x8F91;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Popconfirm</span>
                            <span class="hljs-attr">okText</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&quot;</span>
                            <span class="hljs-attr">cancelText</span>=<span class="hljs-string">&quot;&#x53D6;&#x6D88;&quot;</span>
                            <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&#x5220;&#x9664;&#x6B64;&#x7528;&#x6237;&#x5417;?&quot;</span>
                            <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =&gt;</span> this.onDel(record.id)}&gt;
                             <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Popconfirm</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Fragment</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,pageNum,total}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: pageNum,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">pageNum</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/admin/user?pageNum=${pageNum}`);</span>
                <span class="hljs-comment">//dispatch(routerRedux.push(`/admin/user?pageNum=${pageNum}`));</span>
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">&apos;/admin/user&apos;</span>,
                    <span class="hljs-attr">query</span>:{pageNum}
                }));
            }
        }
        <span class="hljs-keyword">const</span> rowSelection={
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;checkbox&apos;</span>,
            <span class="hljs-attr">selectedRowKeys</span>: <span class="hljs-keyword">this</span>.props.selectedRowKeys,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">selectedRowKeys</span>) =&gt;</span> {
                <span class="hljs-keyword">this</span>.save({selectedRowKeys});
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Card&gt;
                &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                    rowSelection={rowSelection}
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
            &lt;/Card&gt;
        )
    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {username,email,id}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&#x7528;&#x6237;&apos;:&apos;&#x4FEE;&#x6539;&#x7528;&#x6237;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem&gt;
                       {
                            getFieldDecorator(&apos;id&apos;,{
                                initialValue: id
                            })(&lt;Input type=&quot;hidden&quot; /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x7528;&#x6237;&#x540D;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;username&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: username
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem label=&quot;&#x90AE;&#x7BB1;&quot; &gt;
                        {
                            getFieldDecorator(&apos;email&apos;,{
                                initialValue: email,
                                rules: [{required: true,message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                            }]})(&lt;Input/&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h3 id="t217.3 /user/constants.js">7.3 /user/constants.js <a href="#t217.3 /user/constants.js"> # </a></h3>
<p>src/pages/admin/user/constants.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span>  <span class="hljs-keyword">const</span> PAGE_SIZE = <span class="hljs-number">3</span>;
</code></pre>
<h3 id="t227.4 /user/models/user.js">7.4 /user/models/user.js <a href="#t227.4 /user/models/user.js"> # </a></h3>
<p>src/pages/admin/user/models/user.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> userService <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/user&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>: <span class="hljs-string">&apos;user&apos;</span>,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,
        <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">pageNum</span>:<span class="hljs-number">1</span>,
        <span class="hljs-attr">record</span>: {},
        <span class="hljs-attr">selectedRowKeys</span>:[]
    },
    <span class="hljs-attr">reducers</span>: {
        save(state,{payload}) {
            <span class="hljs-keyword">return</span> {...state,...payload};
        }
    },
    <span class="hljs-attr">effects</span>: {
        *fetch({<span class="hljs-attr">payload</span>: {pageNum=<span class="hljs-number">1</span>}},{call,put}) {
            <span class="hljs-keyword">const</span> {list,total}=<span class="hljs-keyword">yield</span> call(userService.fetch,pageNum);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{list,<span class="hljs-attr">pageNum</span>:<span class="hljs-built_in">parseInt</span>(pageNum),total}});
        },
        *create({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(userService.create,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">pageNum</span>:<span class="hljs-number">1</span>}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *update({payload},{call,put,select}) {
            <span class="hljs-keyword">yield</span> call(userService.update,payload);
            <span class="hljs-keyword">let</span> pageNum=<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span>=&gt;</span>state.user.pageNum);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {pageNum}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *del({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(userService.del,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">pageNum</span>:<span class="hljs-number">1</span>}});
        }
    },
    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            <span class="hljs-keyword">return</span> history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname===<span class="hljs-string">&apos;/admin/user&apos;</span>) {
                    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;pathname&apos;</span>,pathname);
                    dispatch({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>:query});
                }
            });
        }
    }
}
</code></pre>
<h3 id="t237.5 user/services/user.js">7.5 user/services/user.js <a href="#t237.5 user/services/user.js"> # </a></h3>
<p>src/pages/admin/user/services/user.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> request <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../../../utils/request&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../constants&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fetch</span>(<span class="hljs-params">pageNum</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/user?pageNum=<span class="hljs-subst">${pageNum}</span>&amp;pageSize=<span class="hljs-subst">${PAGE_SIZE}</span>`</span>);
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">create</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/user`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">update</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/user/<span class="hljs-subst">${values.id}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;PUT&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">del</span>(<span class="hljs-params">id</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/user/<span class="hljs-subst">${id}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;DELETE&apos;</span>
    });
}
</code></pre>
<h2 id="t248. &#x5168;&#x90E8;&#x5220;&#x9664;">8. &#x5168;&#x90E8;&#x5220;&#x9664; <a href="#t248. &#x5168;&#x90E8;&#x5220;&#x9664;"> # </a></h2>
<h3 id="t258.1 user/index.js">8.1 user/index.js <a href="#t258.1 user/index.js"> # </a></h3>
<p>src/pages/admin/user/index.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+ onAllDel=() =&gt; {</span>
<span class="hljs-addition">+         this.props.dispatch({</span>
<span class="hljs-addition">+             type: &apos;user/delAll&apos;,</span>
<span class="hljs-addition">+             payload:this.props.selectedRowKeys</span>
<span class="hljs-addition">+         });</span>
<span class="hljs-addition">+     }</span>
  &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
<span class="hljs-addition">+ &lt;Button type=&quot;danger&quot; onClick={this.onAllDel}&gt;&#x5168;&#x90E8;&#x5220;&#x9664;&lt;/Button&gt;</span>
</code></pre>
<h3 id="t268.2 user/models/user.js">8.2 user/models/user.js <a href="#t268.2 user/models/user.js"> # </a></h3>
<p>src/pages/admin/user/models/user.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+ *delAll({payload},{call,put}) {</span>
<span class="hljs-addition">+             yield call(userService.delAll,payload);</span>
<span class="hljs-addition">+             yield put({type: &apos;fetch&apos;,payload: {pageNum:1}});</span>
<span class="hljs-addition">+ }</span>
</code></pre>
<h3 id="t278.3 user/services/user.js">8.3 user/services/user.js <a href="#t278.3 user/services/user.js"> # </a></h3>
<p>src/pages/admin/user/services/user.js</p>
<pre><code class="lang-diff">export function delAll(ids) {
    return request(`/user/${ids[0]}`,{
        method: &apos;DELETE&apos;,
        headers: {&quot;Content-Type&quot;: &quot;application/json&quot;},
        body: JSON.stringify(ids)
    });
}
</code></pre>
<h2 id="t289. &#x641C;&#x7D22;">9. &#x641C;&#x7D22; <a href="#t289. &#x641C;&#x7D22;"> # </a></h2>
<h3 id="t299.1 admin/user/index.js">9.1 admin/user/index.js <a href="#t299.1 admin/user/index.js"> # </a></h3>
<p>src/pages/admin/user/index.js</p>
<pre><code class="lang-diff">onSearch=() =&gt; {
        let values=this.searchForm.props.form.getFieldsValue();
        let where=Object.keys(values).reduce((memo,key) =&gt; {
            if (values[key]){
                memo[key]=values[key];
            }
            return memo;
        },{});
        this.props.dispatch({
            type: &apos;user/search&apos;,
            payload:where
        });
    }

&lt;Card&gt;
    &lt;SearchForm
        where={where}
        onSearch={this.onSearch}
        wrappedComponentRef={inst=&gt;this.searchForm=inst}/&gt;
&lt;/Card&gt;

@Form.create()
class SearchForm extends Component{
    render() {
        let {form: {getFieldDecorator},onSearch,where={}}=this.props;
        return (
            &lt;Form layout=&quot;inline&quot;&gt;
                    &lt;FormItem
                        label=&quot;&#x7528;&#x6237;&#x540D;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;username&apos;,{initialValue:where.username})(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x90AE;&#x7BB1;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;email&apos;,{initialValue:where.email})(&lt;Input/&gt;)
                        }
                &lt;/FormItem&gt;
                &lt;FormItem&gt;
                    &lt;Button onClick={onSearch} shape=&quot;circle&quot; icon=&quot;search&quot;&gt;&lt;/Button&gt;
                &lt;/FormItem&gt;
                &lt;/Form&gt;
        )
    }
}

</code></pre>
<h3 id="t309.2 user/models/user.js">9.2 user/models/user.js <a href="#t309.2 user/models/user.js"> # </a></h3>
<p>src/pages/admin/user/models/user.js</p>
<pre><code class="lang-js">        *fetch({<span class="hljs-attr">payload</span>: {pageNum,where}},{call,put,select}) {
            <span class="hljs-keyword">if</span> (!where) {
                where =<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state.user.where);
            }
            <span class="hljs-keyword">if</span> (!pageNum) {
                pageNum =<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state.user.pageNum);
            }
            <span class="hljs-keyword">const</span> {list,total}=<span class="hljs-keyword">yield</span> call(userService.fetch,pageNum,where);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{list,<span class="hljs-attr">pageNum</span>:<span class="hljs-built_in">parseInt</span>(pageNum),total,where}});
        },
        *search({<span class="hljs-attr">payload</span>:where},{call,put}) {
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">pageNum</span>:<span class="hljs-number">1</span>,where}});
        }
</code></pre>
<h3 id="t319.3 user/services/user.js">9.3 user/services/user.js <a href="#t319.3 user/services/user.js"> # </a></h3>
<p>src/pages/admin/user/services/user.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> querystring <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;querystring&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fetch</span>(<span class="hljs-params">pageNum,where</span>) </span>{
    <span class="hljs-keyword">let</span> whereString=querystring.stringify(where);
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/user?pageNum=<span class="hljs-subst">${pageNum}</span>&amp;pageSize=<span class="hljs-subst">${PAGE_SIZE}</span>&amp;<span class="hljs-subst">${whereString}</span>`</span>);
}
</code></pre>
<h2 id="t3210. &#x70B9;&#x51FB;&#x9009;&#x62E9;&#x884C;">10. &#x70B9;&#x51FB;&#x9009;&#x62E9;&#x884C; <a href="#t3210. &#x70B9;&#x51FB;&#x9009;&#x62E9;&#x884C;"> # </a></h2>
<h3 id="t3310.1 admin/user/index.js">10.1 admin/user/index.js <a href="#t3310.1 admin/user/index.js"> # </a></h3>
<p>src/pages/admin/user/index.js</p>
<pre><code class="lang-js"> &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                    rowSelection={rowSelection}
                    onRow = {
+                      <span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
+                        <span class="hljs-keyword">return</span> {
+                          onClick: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
+                            <span class="hljs-keyword">let</span> selectedRowKeys = <span class="hljs-keyword">this</span>.props.selectedRowKeys;
+                            <span class="hljs-keyword">let</span> index = selectedRowKeys.indexOf(record.id);
+                            <span class="hljs-keyword">if</span> (index == <span class="hljs-number">-1</span>) {
+                              selectedRowKeys = [...selectedRowKeys, record.id];
+                            } <span class="hljs-keyword">else</span> {
+                              selectedRowKeys = selectedRowKeys.filter(<span class="hljs-function"><span class="hljs-params">key</span> =&gt;</span> key !=record.id);
+                            }
+                            <span class="hljs-keyword">this</span>.save({
+                              selectedRowKeys
+                            });
+                          }
+                        }
+                      }
+                    }
                /&gt;
</code></pre>
<h2 id="t3411. &#x89D2;&#x8272;&#x7BA1;&#x7406;">11. &#x89D2;&#x8272;&#x7BA1;&#x7406; <a href="#t3411. &#x89D2;&#x8272;&#x7BA1;&#x7406;"> # </a></h2>
<h3 id="t3511.1 /role/index.js">11.1 /role/index.js <a href="#t3511.1 /role/index.js"> # </a></h3>
<p>src/pages/role/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message,Popconfirm} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./constants&apos;</span>;
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
<span class="hljs-keyword">const</span> ENTITY=<span class="hljs-string">&apos;role&apos;</span>;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state[ENTITY],<span class="hljs-attr">loading</span>:state.loading.models[ENTITY]})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Role</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/save`</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEdit=<span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">false</span>,record});
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isCreate?<span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/create`</span>:<span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/update`</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    onDel=<span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/del`</span>,
            <span class="hljs-attr">payload</span>:id
        });
    }
    onAllDel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/delAll`</span>,
            <span class="hljs-attr">payload</span>:<span class="hljs-keyword">this</span>.props.selectedRowKeys
        });
    }
    onSearch=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">let</span> values=<span class="hljs-keyword">this</span>.searchForm.props.form.getFieldsValue();
        <span class="hljs-keyword">let</span> where=<span class="hljs-built_in">Object</span>.keys(values).reduce(<span class="hljs-function">(<span class="hljs-params">memo,key</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (values[key]){
                memo[key]=values[key];
            }
            <span class="hljs-keyword">return</span> memo;
        },{});
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/search`</span>,
            <span class="hljs-attr">payload</span>:where
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x540D;&#x79F0;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Fragment</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.onEdit(record)}&gt;&#x7F16;&#x8F91;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Popconfirm</span>
                            <span class="hljs-attr">okText</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&quot;</span>
                            <span class="hljs-attr">cancelText</span>=<span class="hljs-string">&quot;&#x53D6;&#x6D88;&quot;</span>
                            <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&#x5220;&#x9664;&#x5417;?&quot;</span>
                            <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =&gt;</span> this.onDel(record.id)}&gt;
                             <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Popconfirm</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Fragment</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,pageNum,total,where}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: pageNum,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">pageNum</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/admin/user?pageNum=${pageNum}`);</span>
                <span class="hljs-comment">//dispatch(routerRedux.push(`/admin/user?pageNum=${pageNum}`));</span>
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">`/admin/<span class="hljs-subst">${ENTITY}</span>`</span>,
                    <span class="hljs-attr">query</span>:{pageNum}
                }));
            }
        }
        <span class="hljs-keyword">const</span> rowSelection={
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;checkbox&apos;</span>,
            <span class="hljs-attr">selectedRowKeys</span>: <span class="hljs-keyword">this</span>.props.selectedRowKeys,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">selectedRowKeys</span>) =&gt;</span> {
                <span class="hljs-keyword">this</span>.save({selectedRowKeys});
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Fragment&gt;
              &lt;Card&gt;
                    &lt;SearchForm
                        where={where}
                        onSearch={this.onSearch}
                        wrappedComponentRef={inst=&gt;this.searchForm=inst}/&gt;
              &lt;/Card&gt;
              &lt;Card&gt;
                &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                &lt;Button type=&quot;danger&quot; onClick={this.onAllDel}&gt;&#x5168;&#x90E8;&#x5220;&#x9664;&lt;/Button&gt;
                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                    rowSelection={rowSelection}
                    onRow = {
                      (record) =&gt; {
                        return {
                          onClick: () =&gt; {
                            let selectedRowKeys = this.props.selectedRowKeys;
                            let index = selectedRowKeys.indexOf(record.id);
                            if (index == -1) {
                              selectedRowKeys = [...selectedRowKeys, record.id];
                            } else {
                              selectedRowKeys = selectedRowKeys.filter(key =&gt; key != record.id);
                            }
                            this.save({
                              selectedRowKeys
                            });
                          }
                        }
                      }
                    }
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
                    &lt;/Card&gt;
             &lt;/Fragment&gt;
        )
    }
}

@Form.create()
class SearchForm extends Component{
    render() {
        let {form: {getFieldDecorator},onSearch,where={}}=this.props;
        return (
            &lt;Form layout=&quot;inline&quot;&gt;
                    &lt;FormItem
                        label=&quot;&#x540D;&#x79F0;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{initialValue:where.name})(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;FormItem&gt;
                    &lt;Button onClick={onSearch} shape=&quot;circle&quot; icon=&quot;search&quot;&gt;&lt;/Button&gt;
                &lt;/FormItem&gt;
                &lt;/Form&gt;
        )
    }
}


@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,id}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&apos;:&apos;&#x4FEE;&#x6539;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem&gt;
                       {
                            getFieldDecorator(&apos;id&apos;,{
                                initialValue: id
                            })(&lt;Input type=&quot;hidden&quot; /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x540D;&#x79F0;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x540D;&#x79F0;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}

</code></pre>
<h3 id="t3611.2 /role/models/role.js">11.2 /role/models/role.js <a href="#t3611.2 /role/models/role.js"> # </a></h3>
<p>src/pages/admin/role/models/role.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> service <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/role&apos;</span>;
<span class="hljs-keyword">const</span> ENTITY=<span class="hljs-string">&apos;role&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>: ENTITY,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,
        <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">pageNum</span>:<span class="hljs-number">1</span>,
        <span class="hljs-attr">record</span>: {},
        <span class="hljs-attr">selectedRowKeys</span>: [],
        <span class="hljs-attr">where</span>: {}
    },
    <span class="hljs-attr">reducers</span>: {
        save(state,{payload}) {
            <span class="hljs-keyword">return</span> {...state,...payload};
        }
    },
    <span class="hljs-attr">effects</span>: {
        *fetch({<span class="hljs-attr">payload</span>: {pageNum,where}},{call,put,select}) {
            <span class="hljs-keyword">if</span> (!where) {
                where =<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY].where);
            }
            <span class="hljs-keyword">if</span> (!pageNum) {
                pageNum =<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY].pageNum);
            }
            <span class="hljs-keyword">const</span> {list,total}=<span class="hljs-keyword">yield</span> call(service.fetch,pageNum,where);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{list,<span class="hljs-attr">pageNum</span>:<span class="hljs-built_in">parseInt</span>(pageNum),total,where}});
        },
        *create({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.create,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">pageNum</span>:<span class="hljs-number">1</span>}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *update({payload},{call,put,select}) {
            <span class="hljs-keyword">yield</span> call(service.update,payload);
            <span class="hljs-keyword">let</span> pageNum=<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span>=&gt;</span>state[ENTITY].pageNum);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {pageNum}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *del({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.del,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">pageNum</span>:<span class="hljs-number">1</span>}});
        },
        *delAll({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.delAll,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">pageNum</span>:<span class="hljs-number">1</span>}});
        },
        *search({<span class="hljs-attr">payload</span>:where},{call,put}) {
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">pageNum</span>:<span class="hljs-number">1</span>,where}});
        }
    },
    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            <span class="hljs-keyword">return</span> history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname===<span class="hljs-string">`/admin/<span class="hljs-subst">${ENTITY}</span>`</span>) {
                    dispatch({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>:query});
                }
            });
        }
    }
}
</code></pre>
<h3 id="t3711.3 admin/role/services/role.js">11.3 admin/role/services/role.js <a href="#t3711.3 admin/role/services/role.js"> # </a></h3>
<p>src/pages/admin/role/services/role.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> request <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../../../utils/request&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../constants&apos;</span>;
<span class="hljs-keyword">import</span> querystring <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;querystring&apos;</span>;
<span class="hljs-keyword">const</span> ENTITY=<span class="hljs-string">&apos;role&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fetch</span>(<span class="hljs-params">pageNum,where</span>) </span>{
    <span class="hljs-keyword">let</span> whereString=querystring.stringify(where);
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/<span class="hljs-subst">${ENTITY}</span>?pageNum=<span class="hljs-subst">${pageNum}</span>&amp;pageSize=<span class="hljs-subst">${PAGE_SIZE}</span>&amp;<span class="hljs-subst">${whereString}</span>`</span>);
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">create</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/<span class="hljs-subst">${ENTITY}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">update</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/<span class="hljs-subst">${ENTITY}</span>/<span class="hljs-subst">${values.id}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;PUT&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">del</span>(<span class="hljs-params">id</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/<span class="hljs-subst">${ENTITY}</span>/<span class="hljs-subst">${id}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;DELETE&apos;</span>
    });
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">delAll</span>(<span class="hljs-params">ids</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/<span class="hljs-subst">${ENTITY}</span>/<span class="hljs-subst">${ids[<span class="hljs-number">0</span>]}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;DELETE&apos;</span>,
        <span class="hljs-attr">headers</span>: {<span class="hljs-string">&quot;Content-Type&quot;</span>: <span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify(ids)
    });
}
</code></pre>
<h2 id="t3812. &#x8BBE;&#x7F6E;&#x6743;&#x9650;">12. &#x8BBE;&#x7F6E;&#x6743;&#x9650; <a href="#t3812. &#x8BBE;&#x7F6E;&#x6743;&#x9650;"> # </a></h2>
<h3 id="t3912.1 role/index.js">12.1 role/index.js <a href="#t3912.1 role/index.js"> # </a></h3>
<p>src/pages/admin/role/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message,Popconfirm,Tree} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./constants&apos;</span>;
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
<span class="hljs-keyword">const</span> ENTITY=<span class="hljs-string">&apos;role&apos;</span>;
<span class="hljs-keyword">const</span> TreeNode=Tree.TreeNode;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state[ENTITY],<span class="hljs-attr">loading</span>:state.loading.models[ENTITY]})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Enity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/save`</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEdit=<span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">false</span>,record});
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isCreate?<span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/create`</span>:<span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/update`</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    onDel=<span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/del`</span>,
            <span class="hljs-attr">payload</span>:id
        });
    }
    onAllDel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/delAll`</span>,
            <span class="hljs-attr">payload</span>:<span class="hljs-keyword">this</span>.props.selectedRowKeys
        });
    }
    onSearch=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">let</span> values=<span class="hljs-keyword">this</span>.searchForm.props.form.getFieldsValue();
        <span class="hljs-keyword">let</span> where=<span class="hljs-built_in">Object</span>.keys(values).reduce(<span class="hljs-function">(<span class="hljs-params">memo,key</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (values[key]){
                memo[key]=values[key];
            }
            <span class="hljs-keyword">return</span> memo;
        },{});
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/search`</span>,
            <span class="hljs-attr">payload</span>:where
        });
    }
    setRolePermission=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.props.selectedRows.length==<span class="hljs-number">1</span>) {
            <span class="hljs-keyword">let</span> record=<span class="hljs-keyword">this</span>.props.selectedRows[<span class="hljs-number">0</span>];
            <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">setPermissionVisible</span>:<span class="hljs-literal">true</span>,record,<span class="hljs-attr">checkedKeys</span>:record.resourceIds});
        } <span class="hljs-keyword">else</span> {
            message.error(<span class="hljs-string">&apos;&#x4E3A;&#x89D2;&#x8272;&#x8BBE;&#x7F6E;&#x6743;&#x9650;&#x65F6;&#x8981;&#x9009;&#x62E9;&#x5E76;&#x4E14;&#x53EA;&#x80FD;&#x9009;&#x62E9;&#x4E00;&#x4E2A;&#x89D2;&#x8272;!&apos;</span>);
        }
    }
    onCheckPermission=<span class="hljs-function">(<span class="hljs-params">checkedKeys</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({checkedKeys});
    }
    setRolePermissionOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/setRolePermission`</span>
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x540D;&#x79F0;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Fragment</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.onEdit(record)}&gt;&#x7F16;&#x8F91;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Popconfirm</span>
                            <span class="hljs-attr">okText</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&quot;</span>
                            <span class="hljs-attr">cancelText</span>=<span class="hljs-string">&quot;&#x53D6;&#x6D88;&quot;</span>
                            <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&#x5220;&#x9664;&#x6B64;&#x8BB0;&#x5F55;&#x5417;?&quot;</span>
                            <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =&gt;</span> this.onDel(record.id)}&gt;
                             <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Popconfirm</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Fragment</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,page,total,where,setPermissionVisible,resources,checkedKeys}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: page,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">page</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/admin/user?page=${page}`);</span>
                <span class="hljs-comment">//dispatch(routerRedux.push(`/admin/user?page=${page}`));</span>
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">`/admin/<span class="hljs-subst">${ENTITY}</span>`</span>,
                    <span class="hljs-attr">query</span>:{page}
                }));
            }
        }
        <span class="hljs-keyword">const</span> rowSelection={
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;checkbox&apos;</span>,
            <span class="hljs-attr">selectedRowKeys</span>: <span class="hljs-keyword">this</span>.props.selectedRowKeys,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">selectedRowKeys,selectedRows</span>) =&gt;</span> {
                <span class="hljs-keyword">this</span>.save({selectedRowKeys,selectedRows});
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Fragment&gt;
                    &lt;Card&gt;
                    &lt;SearchForm
                        where={where}
                    onSearch={this.onSearch}
                    wrappedComponentRef={inst=&gt;this.searchForm=inst}
                /&gt;
            &lt;/Card&gt;
            &lt;Card&gt;
                &lt;Button.Group&gt;
                    &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                    &lt;Button type=&quot;danger&quot; onClick={this.onAllDel}&gt;&#x5168;&#x90E8;&#x5220;&#x9664;&lt;/Button&gt;
                    &lt;Button icon=&quot;solution&quot; onClick={this.setRolePermission}&gt;&#x8BBE;&#x7F6E;&#x6743;&#x9650;&lt;/Button&gt;
                    &lt;Button icon=&quot;team&quot; onClick={this.setRoleUser}&gt;&#x7528;&#x6237;&#x6388;&#x6743;&lt;/Button&gt;
                &lt;/Button.Group&gt;

                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                        rowSelection={rowSelection}
                        onRow={
                            (record) =&gt; {
                                return {
                                    onClick: () =&gt; {
                                        let selectedRowKeys=this.props.selectedRowKeys;
                                        let selectedRows = this.props.selectedRows;
                                        let index = selectedRowKeys.indexOf(record.id);
                                        if (index==-1) {
                                            selectedRowKeys=[...selectedRowKeys,record.id];
                                            selectedRows=[...selectedRows,record];
                                        } else {
                                            selectedRowKeys=selectedRowKeys.filter(key =&gt; key!=record.id);
                                            selectedRows=selectedRows.filter(row =&gt; row.id!=record.id);
                                        }
                                        this.save({selectedRowKeys,selectedRows});
                                    }
                                }    
                            }
                        }
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
                &lt;PermissonModal
                    visible={setPermissionVisible}
                    record={record}
                    resources={resources}
                    checkedKeys={checkedKeys}
                    onCheck={this.onCheckPermission}
                    onOk={this.setRolePermissionOk}
                    onCancel={()=&gt;this.save({setPermissionVisible:false})}
                /&gt;
            &lt;/Card&gt;
          &lt;/Fragment&gt;
        )
    }
}

@Form.create()
class SearchForm extends Component{
    render() {
        let {form: {getFieldDecorator},onSearch,where={}}=this.props;
        return (
            &lt;Form layout=&quot;inline&quot;&gt;
                    &lt;FormItem
                        label=&quot;&#x89D2;&#x8272;&#x540D;&#x79F0;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{initialValue:where.name})(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;FormItem&gt;
                    &lt;Button onClick={onSearch} shape=&quot;circle&quot; icon=&quot;search&quot;&gt;&lt;/Button&gt;
                &lt;/FormItem&gt;
                &lt;/Form&gt;
        )
    }
}

class PermissonModal extends Component{
    renderResources=(children) =&gt; {
        return children.map(child =&gt; {
            if (child.children.length &gt; 0) {
                return (
                    &lt;TreeNode title={child.name} key={child.id}&gt;
                        {this.renderResources(child.children)}
                    &lt;/TreeNode&gt;
                )
            } else {
                return &lt;TreeNode title={child.name} key={child.id}/&gt;
            }
        });
    }
    render() {
        let {onCheck,visible,onOk,onCancel,checkedKeys,resources=[]}=this.props;
        return (
            &lt;Modal
                visible={visible}
                title=&quot;&#x4E3A;&#x89D2;&#x8272;&#x8BBE;&#x7F6E;&#x6743;&#x9650;&quot;
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Tree
                    checkable
                    defaultExpandAll
                    onCheck={onCheck}
                    checkedKeys={checkedKeys}
                &gt;
                    &lt;TreeNode title=&quot;&#x6240;&#x6709;&#x6743;&#x9650;&quot; key={0} disabled&gt;
                        {this.renderResources(resources)}
                    &lt;/TreeNode&gt;
                &lt;/Tree&gt;
            &lt;/Modal&gt;
        )

    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,email,id}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&apos;:&apos;&#x4FEE;&#x6539;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem&gt;
                       {
                            getFieldDecorator(&apos;id&apos;,{
                                initialValue: id
                            })(&lt;Input type=&quot;hidden&quot; /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x89D2;&#x8272;&#x540D;&#x79F0;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x89D2;&#x8272;&#x540D;&#x79F0;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}

</code></pre>
<h3 id="t4012.2 models/role.js">12.2 models/role.js <a href="#t4012.2 models/role.js"> # </a></h3>
<p>src/pages/admin/role/models/role.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> service <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/role&apos;</span>;
<span class="hljs-keyword">const</span> ENTITY=<span class="hljs-string">&apos;role&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>: ENTITY,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,
        <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">page</span>:<span class="hljs-number">1</span>,
        <span class="hljs-attr">record</span>: {},
        <span class="hljs-attr">selectedRowKeys</span>: [],
        <span class="hljs-attr">selectedRows</span>: [],
        <span class="hljs-attr">checkedKeys</span>: [],
        <span class="hljs-attr">resources</span>:[],
        <span class="hljs-attr">setPermissionVisible</span>:<span class="hljs-literal">false</span>,
        <span class="hljs-attr">where</span>: {}
    },
    <span class="hljs-attr">reducers</span>: {
        save(state,{payload}) {
            <span class="hljs-keyword">return</span> {...state,...payload};
        }
    },
    <span class="hljs-attr">effects</span>: {
        *fetch({<span class="hljs-attr">payload</span>: {page,where}},{call,put,select}) {
            <span class="hljs-keyword">if</span> (!where) {
                where =<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY].where);
            }
            <span class="hljs-keyword">if</span> (!page) {
                page =<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY].page);
            }
            <span class="hljs-keyword">const</span> {list,total}=<span class="hljs-keyword">yield</span> call(service.fetch,page,where);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{page,where,list,<span class="hljs-attr">page</span>:<span class="hljs-built_in">parseInt</span>(page),total}});
        },
        *search({<span class="hljs-attr">payload</span>:where},{call,put}) {
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>,where}});
        },
        *create({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.create,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *update({payload},{call,put,select}) {
            <span class="hljs-keyword">yield</span> call(service.update,payload);
            <span class="hljs-keyword">let</span> page=<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span>=&gt;</span>state[ENTITY].page);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {page}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *del({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.del,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
        },
        *delAll({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.delAll,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
        },
        *getResource({payload},{call,put}) {
            <span class="hljs-keyword">const</span> resources=<span class="hljs-keyword">yield</span> call(service.getResources);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{resources}});
        },
        *setRolePermission({payload},{call,put,select}) {
            <span class="hljs-keyword">let</span> {record,checkedKeys}=<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY]);
            <span class="hljs-keyword">yield</span> call(service.setRolePermission,{<span class="hljs-attr">roleId</span>:record.id,<span class="hljs-attr">resourceIds</span>:checkedKeys});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">setPermissionVisible</span>:<span class="hljs-literal">false</span>,<span class="hljs-attr">selectedRowKeys</span>:[],<span class="hljs-attr">selectedRows</span>:[]}});
        }
    },
    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            <span class="hljs-keyword">return</span> history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname === <span class="hljs-string">`/admin/<span class="hljs-subst">${ENTITY}</span>`</span>) {
                    dispatch({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: query});
                    dispatch({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;getResource&apos;</span>});
                }
            });
        }
    }
}
</code></pre>
<h3 id="t4112.3 services/role.js">12.3 services/role.js <a href="#t4112.3 services/role.js"> # </a></h3>
<p>src/pages/admin/role/services/role.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getResources</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/getResources`</span>);
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setRolePermission</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/setRolePermission`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}
</code></pre>
<h2 id="t4213.&#x7ED9;&#x89D2;&#x8272;&#x52A0;&#x7528;&#x6237;">13.&#x7ED9;&#x89D2;&#x8272;&#x52A0;&#x7528;&#x6237; <a href="#t4213.&#x7ED9;&#x89D2;&#x8272;&#x52A0;&#x7528;&#x6237;"> # </a></h2>
<h3 id="t4313.1 roles/page.js">13.1 roles/page.js <a href="#t4313.1 roles/page.js"> # </a></h3>
<p>src/pages/admin/roles/page.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { Component, Fragment } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> { Transfer, Icon, Tree, Card, Table, Button, Modal, Form, Input, Radio, message, Popconfirm, Select } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">let</span> Option = Select.Option;
<span class="hljs-keyword">const</span> ENTITY = <span class="hljs-string">&apos;role&apos;</span>;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({ ...state[ENTITY], <span class="hljs-attr">loading</span>: state.loading.models[ENTITY] })
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Base</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/save`</span>,
            payload
        });
    }
    handleAdd = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">record</span>: { <span class="hljs-attr">gender</span>: <span class="hljs-number">1</span> }, <span class="hljs-attr">isCreate</span>: <span class="hljs-literal">true</span> });
    }
    handleSave = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-comment">//values = {name:&apos;zfpx&apos;,email:&quot;email&quot;,gender:1}</span>
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err, values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.warn(<span class="hljs-string">&apos;&#x4F60;&#x8F93;&#x5165;&#x7684;&#x8868;&#x5355;&#x6570;&#x636E;&#x4E0D;&#x5408;&#x6CD5;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isCreate ? <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/add`</span> : <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/update`</span>,
                    <span class="hljs-attr">payload</span>: values
                });
            }
        });
    }
    handleEdit = <span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({
            <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,
            record,
            <span class="hljs-attr">isCreate</span>: <span class="hljs-literal">false</span>
        });
    }
    handleDel = <span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/del`</span>,
            <span class="hljs-attr">payload</span>: id
        });
    }
    handleDelAll = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/delAll`</span>,
            <span class="hljs-attr">payload</span>: <span class="hljs-keyword">this</span>.props.selectedRowKeys
        });
    }
    handleSearch = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">let</span> values = <span class="hljs-keyword">this</span>.searchForm.props.form.getFieldsValue();
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;values&apos;</span>, values);
        <span class="hljs-keyword">let</span> where = <span class="hljs-built_in">Object</span>.entries(values).reduce(<span class="hljs-function">(<span class="hljs-params">memo, [key, val]</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> val == <span class="hljs-string">&apos;undefined&apos;</span>) {
                memo[key] = val;
            }
            <span class="hljs-keyword">return</span> memo;
        }, {});
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/fetch`</span>,
            <span class="hljs-attr">payload</span>: { where }
        });
    }
    <span class="hljs-comment">//&#x5F00;&#x59CB;&#x7ED9;&#x89D2;&#x8272;&#x5206;&#x914D;&#x6743;&#x9650;</span>
    setResource = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">let</span> selectedRows = <span class="hljs-keyword">this</span>.props.selectedRows;
        <span class="hljs-keyword">if</span> (selectedRows.length == <span class="hljs-number">1</span>) {
            <span class="hljs-keyword">let</span> record = selectedRows[<span class="hljs-number">0</span>];
            <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">setResourceVisible</span>: <span class="hljs-literal">true</span>, record, <span class="hljs-attr">checkedKeys</span>: record.resourceIds });
        } <span class="hljs-keyword">else</span> {
            message.warn(<span class="hljs-string">&apos;&#x8BF7;&#x9009;&#x4E2D;&#x5E76;&#x4E14;&#x53EA;&#x80FD;&#x9009;&#x4E2D;&#x4E00;&#x4E2A;&#x89D2;&#x8272;!&apos;</span>);
        }
    }
    setResourceOk = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/setResource`</span>
        });
    }
    onSetResourceCheck = <span class="hljs-function">(<span class="hljs-params">checkedKeys</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ checkedKeys });
    }

    <span class="hljs-comment">//&#x5F00;&#x59CB;&#x7ED9;&#x89D2;&#x8272;&#x5206;&#x914D;&#x7528;&#x6237;</span>
    setUser = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">let</span> selectedRows = <span class="hljs-keyword">this</span>.props.selectedRows;
        <span class="hljs-keyword">if</span> (selectedRows.length == <span class="hljs-number">1</span>) {
            <span class="hljs-keyword">let</span> record = selectedRows[<span class="hljs-number">0</span>];
            <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">setUserVisible</span>: <span class="hljs-literal">true</span>, record, <span class="hljs-attr">targetKeys</span>: record.userIds });
        } <span class="hljs-keyword">else</span> {
            message.warn(<span class="hljs-string">&apos;&#x8BF7;&#x9009;&#x4E2D;&#x5E76;&#x4E14;&#x53EA;&#x80FD;&#x9009;&#x4E2D;&#x4E00;&#x4E2A;&#x89D2;&#x8272;!&apos;</span>);
        }
    }
    setUserOk = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/setUser`</span>
        });
    }
    onSetUserChange = <span class="hljs-function">(<span class="hljs-params">targetKeys</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ targetKeys });
    }
    render() {
        <span class="hljs-keyword">let</span> columns = [
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x59D3;&#x540D;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x6027;&#x522B;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;gender&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val, record</span>) =&gt;</span> (val === <span class="hljs-number">1</span> ? <span class="hljs-string">&apos;&#x7537;&apos;</span> : <span class="hljs-string">&apos;&#x5973;&apos;</span>)
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val, record</span>) =&gt;</span> {
                    <span class="hljs-keyword">return</span> (
                        &lt;Button.Group&gt;
                            &lt;Button type=&quot;warning&quot; icon=&quot;edit&quot; onClick={() =&gt; this.handleEdit(record)}&gt;&#x7F16;&#x8F91;&lt;/Button&gt;
                            &lt;Popconfirm title=&quot;&#x4F60;&#x786E;&#x5B9A;&#x8981;&#x5220;&#x9664;&#x5417;?&quot; okText=&quot;&#x662F;&quot; cancelText=&quot;&#x5426;&quot; onConfirm={() =&gt; this.handleDel(record.id)}&gt;
                                &lt;Button type=&quot;danger&quot; icon=&quot;delete&quot;&gt;&#x5220;&#x9664;&lt;/Button&gt;
                            &lt;/Popconfirm&gt;
                        &lt;/Button.Group&gt;
                    )
                }
            }
        ]
        let { list, editVisible, record, isCreate, selectedRowKeys,
            pageNum, total, loading,
            setResourceVisible, checkedKeys, resources, setUserVisible, targetKeys, users
        } = this.props;
        let rowSelection = {
            type: &apos;checkbox&apos;,
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) =&gt; {
                this.save({ selectedRowKeys, selectedRows });
            }
        }
        let pagination = {
            current: pageNum,//&#x5F53;&#x524D;&#x9875;&#x7801;
            pageSize: 3,
            total,//&#x603B;&#x6761;&#x6570;
            showQuickJumper: true,
            showTotal: (total) =&gt; `&#x5171;${total}&#x6761;`,
            onChange: (pageNum, pageSize) =&gt; {
                //&#x8DF3;&#x8F6C;&#x8DEF;&#x5F84;&#x6709;&#x4E09;&#x79CD;&#x65B9;&#x6CD5;
                this.props.dispatch(routerRedux.push(`/admin/${ENTITY}?pageNum=${pageNum}`));
            }
        }
        return (
            &lt;Fragment&gt;
                &lt;Card&gt;
                    &lt;SearchForm
                        wrappedComponentRef={inst =&gt; this.searchForm = inst}
                        handleSearch={this.handleSearch} /&gt;
                &lt;/Card&gt;
                &lt;Card&gt;
                    &lt;Button type=&quot;primary&quot; icon=&quot;plus-circle&quot; onClick={this.handleAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                    &lt;Button style={{ marginLeft: 8 }} type=&quot;dashed&quot; icon=&quot;delete&quot; onClick={this.handleDelAll}&gt;&#x6279;&#x91CF;&#x5220;&#x9664;&lt;/Button&gt;
                    &lt;Button style={{ marginLeft: 8 }} type=&quot;primary&quot; icon=&quot;plus-circle&quot; onClick={this.setResource}&gt;&#x5206;&#x914D;&#x6743;&#x9650;&lt;/Button&gt;
                    &lt;Button style={{ marginLeft: 8 }} type=&quot;primary&quot; icon=&quot;plus-circle&quot; onClick={this.setUser}&gt;&#x5206;&#x914D;&#x7528;&#x6237;&lt;/Button&gt;
                    &lt;Table
                        columns={columns}
                        dataSource={list}
                        loading={loading}
                        rowKey={record =&gt; record.id}
                        rowSelection={rowSelection}
                        pagination={pagination}
                        onRow={record =&gt; ({
                            onClick: () =&gt; {
                                let index = selectedRowKeys.indexOf(record.id);
                                if (index == -1) {
                                    selectedRowKeys = [...selectedRowKeys, record.id];
                                } else {
                                    selectedRowKeys = selectedRowKeys.filter(key =&gt; key != record.id);
                                }
                                this.save({ selectedRowKeys });
                            }
                        })}
                    /&gt;
                    &lt;EditModal
                        wrappedComponentRef={inst =&gt; this.editForm = inst}
                        visible={editVisible}
                        isCreate={isCreate}
                        record={record}
                        onOk={this.handleSave}
                        onCancel={() =&gt; this.save({ editVisible: false })}
                    /&gt;
                    &lt;SetResourceModal
                        visible={setResourceVisible}
                        record={record}
                        onOk={this.setResourceOk}
                        checkedKeys={checkedKeys}
                        onCheck={this.onSetResourceCheck}
                        resources={resources}
                        onCancel={() =&gt; this.save({ setResourceVisible: false })}
                    /&gt;
                    &lt;SetUserModal
                        visible={setUserVisible}
                        record={record}
                        onOk={this.setUserOk}
                        targetKeys={targetKeys}
                        onChange={this.onSetUserChange}
                        users={users}
                        onCancel={() =&gt; this.save({ setUserVisible: false })}
                    /&gt;
                &lt;/Card &gt;
            &lt;/Fragment&gt;
        )
    }
}

class SetUserModal extends Component {
    render() {
        let { visible, onOk, onCancel, record, targetKeys, onChange, users } = this.props;
        return (
            &lt;Modal
                title={`&#x4E3A; ${record.name} &#x5206;&#x914D;&#x7528;&#x6237;`}
                visible={visible}
                onOk={onOk}
                okText={&quot;&#x786E;&#x5B9A;&quot;}
                cancelText={&quot;&#x53D6;&#x6D88;&quot;}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Transfer
                    dataSource={users}
                    targetKeys={targetKeys}
                    titles={[&quot;&#x5F85;&#x9009;&#x7528;&#x6237;&quot;, &quot;&#x5DF2;&#x9009;&#x7528;&#x6237;&quot;]}
                    onChange={onChange}
                    render={row =&gt; row.name}
                    rowKey={row =&gt; row.id}
                /&gt;
            &lt;/Modal&gt;
        )
    }
}


class SetResourceModal extends Component {
    renderTree = (children = []) =&gt; {
        return children.map(item =&gt; {
            if (item.children &amp;&amp; item.children.length &gt; 0) {
                return (
                    &lt;Tree.TreeNode title={&lt;span&gt;&lt;Icon type={item.type} /&gt;{item.name}&lt;/span&gt;} key={item.id} &gt;
                        {this.renderTree(item.children)}
                    &lt;/Tree.TreeNode&gt;
                )
            } else {
                return &lt;Tree.TreeNode title={&lt;span&gt;&lt;Icon type={item.type} /&gt;{item.name}&lt;/span&gt;} key={item.id} /&gt;
            }
        });
    }
    render() {
        let { visible, onOk, onCancel, record, checkedKeys, onCheck, resources } = this.props;

        return (
            &lt;Modal
                title=&quot;&#x4E3A;&#x89D2;&#x8272;&#x5206;&#x6743;&#x9650;&quot;
                visible={visible}
                onOk={onOk}
                okText={&quot;&#x786E;&#x5B9A;&quot;}
                cancelText={&quot;&#x53D6;&#x6D88;&quot;}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Tree
                    checkable
                    defaultExpandAll
                    checkedKeys={checkedKeys}
                    destroyOnClose
                    onCheck={onCheck}
                &gt;
                    &lt;Tree.TreeNode title=&quot;&#x5E73;&#x53F0;&#x6743;&#x9650;&quot; key={0} disabled&gt;
                        {this.renderTree(resources)}
                    &lt;/Tree.TreeNode&gt;
                &lt;/Tree&gt;
            &lt;/Modal&gt;
        )
    }
}

@Form.create()
class SearchForm extends Component {
    render() {
        let { form: { getFieldDecorator }, handleSearch } = this.props;
        return (
            &lt;Form layout=&quot;inline&quot;&gt;
                &lt;Form.Item&gt;
                    {
                        getFieldDecorator(&apos;name&apos;, {})(&lt;Input placeholder=&quot;&#x7528;&#x6237;&#x540D;&quot; /&gt;)
                    }
                &lt;/Form.Item&gt;
                &lt;Form.Item  &gt;
                    {
                        getFieldDecorator(&apos;email&apos;, {})(&lt;Input placeholder=&quot;&#x90AE;&#x7BB1;&quot; /&gt;)
                    }
                &lt;/Form.Item&gt;
                &lt;Form.Item&gt;
                    {
                        getFieldDecorator(&apos;gender&apos;, {})(&lt;Select onSelect={handleSearch}&gt;
                            &lt;Option value={1}&gt;&#x7537;&lt;/Option&gt;
                            &lt;Option value={0}&gt;&#x5973;&lt;/Option&gt;
                        &lt;/Select&gt;)
                    }

                &lt;/Form.Item&gt;
                &lt;Form.Item&gt;
                    &lt;Button
                        onClick={handleSearch}
                        icon=&quot;search&quot; shape=&quot;circle&quot;&gt;&lt;/Button&gt;
                &lt;/Form.Item&gt;
            &lt;/Form&gt;
        )
    }
}

//&#x4E00;&#x65E6;&#x7528;Form.create()&#x7684;&#x7ED3;&#x679C;&#x8FDB;&#x884C;&#x88C5;&#x9970;&#x4E86;&#xFF0C;&#x90A3;&#x4E48;&#x6B64;&#x7EC4;&#x4EF6;&#x5C31;&#x4F1A;&#x83B7;&#x53D6;&#x4E00;&#x4E2A;props.form&#x7684;&#x5C5E;&#x6027;.form&#x6709;&#x5F88;&#x591A;&#x4E2A;&#x65B9;&#x6CD5;
@Form.create()
class EditModal extends Component {
    render() {
        let { visible, form: { getFieldDecorator }, onOk, onCancel, record, isCreate } = this.props;
        let formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 },
            },
        }
        return (
            &lt;Modal
                title={isCreate ? &quot;&#x65B0;&#x589E;&#x7528;&#x6237;&quot; : &quot;&#x7F16;&#x8F91;&#x7528;&#x6237;&quot;}
                visible={visible}
                onOk={onOk}
                okText={&quot;&#x786E;&#x5B9A;&quot;}
                cancelText={&quot;&#x53D6;&#x6D88;&quot;}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;Form.Item&gt;
                        {
                            getFieldDecorator(&apos;id&apos;, {
                                initialValue: record.id
                            })(&lt;Input type=&quot;hidden&quot; /&gt;)
                        }
                    &lt;/Form.Item&gt;
                    &lt;Form.Item label=&quot;&#x7528;&#x6237;&#x540D;&quot; {...formItemLayout}&gt;
                        {
                            getFieldDecorator(&apos;name&apos;, {
                                initialValue: record.name,
                                rules: [
                                    { required: true, message: &apos;&#x8BF7;&#x8F93;&#x5165;&#x7528;&#x6237;&#x540D;&apos; }
                                ]
                            })(&lt;Input placeholder=&quot;&#x7528;&#x6237;&#x540D;&quot; /&gt;)
                        }
                    &lt;/Form.Item&gt;
                    &lt;Form.Item label=&quot;&#x90AE;&#x7BB1;&quot; {...formItemLayout}&gt;
                        {
                            getFieldDecorator(&apos;email&apos;, {
                                initialValue: record.email,
                                rules: [
                                    { type: &apos;email&apos;, message: &apos;&#x8BF7;&#x8F93;&#x5165;&#x5408;&#x6CD5;&#x7684;&#x90AE;&#x7BB1;&#x5730;&#x5740;!&apos; },
                                    { required: true, message: &apos;&#x8BF7;&#x8F93;&#x5165;&#x90AE;&#x7BB1;!&apos; }
                                ]
                            })(&lt;Input placeholder=&quot;&#x90AE;&#x7BB1;&quot; /&gt;)
                        }
                    &lt;/Form.Item&gt;
                    &lt;Form.Item label=&quot;&#x6027;&#x522B;&quot; {...formItemLayout}&gt;
                        {
                            getFieldDecorator(&apos;gender&apos;, {
                                initialValue: record.gender,
                                rules: [
                                    { required: true, message: &apos;&#x8BF7;&#x9009;&#x62E9;&#x6027;&#x522B;&apos; }
                                ]
                            })(
                                &lt;Radio.Group&gt;
                                    &lt;Radio value={1}&gt;&#x7537;&lt;/Radio&gt;
                                    &lt;Radio value={0}&gt;&#x5973;&lt;/Radio&gt;
                                &lt;/Radio.Group&gt;
                            )
                        }
                    &lt;/Form.Item&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h3 id="t4413.2 models/roles.js">13.2 models/roles.js <a href="#t4413.2 models/roles.js"> # </a></h3>
<p>src/pages/admin/roles/models/roles.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> service <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/role&apos;</span>;
<span class="hljs-keyword">import</span> { PAGE_SIZE } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../constants&apos;</span>;
<span class="hljs-keyword">const</span> ENTITY = <span class="hljs-string">&apos;role&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {

    <span class="hljs-attr">namespace</span>: ENTITY,

    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">isCreate</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">pageNum</span>: <span class="hljs-number">1</span>,
        <span class="hljs-attr">total</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">where</span>: {},
        <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span>,<span class="hljs-comment">//&#x662F;&#x5426;&#x663E;&#x793A;&#x7F16;&#x8F91;&#x7A97;&#x53E3;</span>
        record: { <span class="hljs-attr">gender</span>: <span class="hljs-number">1</span> },<span class="hljs-comment">//&#x4EE3;&#x8868;&#x5F53;&#x524D;&#x6B63;&#x5728;&#x7F16;&#x8F91;&#x7684;&#x5BF9;&#x8C61;</span>
        selectedRowKeys: [],
        <span class="hljs-attr">selectedRows</span>: [],
        <span class="hljs-attr">setResourceVisible</span>: <span class="hljs-literal">false</span>,<span class="hljs-comment">//&#x8BBE;&#x7F6E;&#x6743;&#x9650;&#x7684;&#x6A21;&#x6001;&#x7A97;&#x53E3;&#x662F;&#x5426;&#x663E;&#x793A;</span>
        checkedKeys: [],<span class="hljs-comment">//&#x54EA;&#x4E9B;&#x6743;&#x9650;&#x88AB;&#x9009;&#x4E2D;&#x4E86;</span>
        resources: [],<span class="hljs-comment">//&#x8D44;&#x6E90;,&#x662F;&#x4E00;&#x4E2A;&#x6570;&#x7EC4;&#xFF0C;&#x91CC;&#x9762;&#x7B2C;&#x4E00;&#x5C42;&#x653E;&#x7740;&#x9876;&#x5C42;&#x8D44;&#x6E90;</span>
        setUserVisible: <span class="hljs-literal">false</span>,<span class="hljs-comment">//&#x7A97;&#x53E3;&#x662F;&#x5426;&#x663E;&#x793A;</span>
        targetKeys: [],<span class="hljs-comment">//&#x9009;&#x4E2D;&#x7684;&#x7528;&#x6237;</span>
        users: [] <span class="hljs-comment">//&#x6240;&#x6709;&#x7684;&#x7528;&#x6237;</span>
    },

    <span class="hljs-attr">subscriptions</span>: {
        setup({ dispatch, history }) {
            <span class="hljs-comment">// &#x901A;&#x8FC7;&#x5730;&#x5740;&#x6765;&#x5206;&#x9875;   /admin/user?pageNum=2</span>
            history.listen(<span class="hljs-function">(<span class="hljs-params">{ pathname, query }</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname === <span class="hljs-string">`/admin/<span class="hljs-subst">${ENTITY}</span>`</span>) {
                    dispatch({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>, <span class="hljs-attr">payload</span>: query });
                    dispatch({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;getResource&apos;</span> });
                    dispatch({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;getUser&apos;</span> });
                }
            });
        },
    },

    <span class="hljs-attr">effects</span>: {
        *fetch({ <span class="hljs-attr">payload</span>: { pageNum, where } }, { call, put, select }) {
            <span class="hljs-keyword">if</span> (!pageNum) {
                pageNum = <span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY].pageNum);
            }
            <span class="hljs-keyword">if</span> (!where) {
                where = <span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY].where);
            }
            <span class="hljs-keyword">let</span> { list, total } = <span class="hljs-keyword">yield</span> call(service.list, pageNum, PAGE_SIZE, where);
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;save&apos;</span>, <span class="hljs-attr">payload</span>: { list, total, <span class="hljs-attr">pageNum</span>: <span class="hljs-built_in">parseInt</span>(pageNum), where } });
        },
        *add({ payload }, { call, put }) {
            <span class="hljs-keyword">yield</span> call(service.add, payload);
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>, <span class="hljs-attr">payload</span>: {} });
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;save&apos;</span>, <span class="hljs-attr">payload</span>: { <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span> } });
        },
        *update({ payload }, { call, put }) {
            <span class="hljs-keyword">yield</span> call(service.update, payload);
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>, <span class="hljs-attr">payload</span>: {} });
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;save&apos;</span>, <span class="hljs-attr">payload</span>: { <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span> } });
        },
        *del({ payload }, { call, put }) {
            <span class="hljs-keyword">yield</span> call(service.del, payload);
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>, <span class="hljs-attr">payload</span>: {} });
        },
        *delAll({ payload }, { call, put }) {
            <span class="hljs-keyword">yield</span> call(service.delAll, payload);
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>, <span class="hljs-attr">payload</span>: {} });
        },
        *getResource({ }, { call, put }) {
            <span class="hljs-keyword">let</span> resources = <span class="hljs-keyword">yield</span> call(service.getResource);
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;save&apos;</span>, <span class="hljs-attr">payload</span>: { resources } });
        },
        *getUser({ }, { call, put }) {
            <span class="hljs-keyword">let</span> users = <span class="hljs-keyword">yield</span> call(service.getUser);
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;save&apos;</span>, <span class="hljs-attr">payload</span>: { users } });
        },
        *setResource({ }, { call, put, select }) {
            <span class="hljs-keyword">let</span> record = <span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state.role.record);
            <span class="hljs-keyword">let</span> checkedKeys = <span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state.role.checkedKeys);
            <span class="hljs-keyword">yield</span> call(service.setResource, {
                <span class="hljs-attr">roleId</span>: record.id,
                <span class="hljs-attr">resourceIds</span>: checkedKeys
            });
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;save&apos;</span>, <span class="hljs-attr">payload</span>: { <span class="hljs-attr">setResourceVisible</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">selectedRowKeys</span>: [], <span class="hljs-attr">selectedRows</span>: [] } });
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>, <span class="hljs-attr">payload</span>: {} });
        },
        *setUser({ }, { call, put, select }) {
            <span class="hljs-keyword">let</span> record = <span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state.role.record);
            <span class="hljs-keyword">let</span> targetKeys = <span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state.role.targetKeys);
            <span class="hljs-keyword">yield</span> call(service.setUser, {
                <span class="hljs-attr">roleId</span>: record.id,
                <span class="hljs-attr">userIds</span>: targetKeys
            });
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;save&apos;</span>, <span class="hljs-attr">payload</span>: { <span class="hljs-attr">setUserVisible</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">selectedRowKeys</span>: [], <span class="hljs-attr">selectedRows</span>: [] } });
            <span class="hljs-keyword">yield</span> put({ <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>, <span class="hljs-attr">payload</span>: {} });
        }
    },

    <span class="hljs-attr">reducers</span>: {
        save(state, action) {
            <span class="hljs-keyword">return</span> { ...state, ...action.payload };
        }
    },

};

</code></pre>
<h3 id="t4513.3 services/roles.js">13.3 services/roles.js <a href="#t4513.3 services/roles.js"> # </a></h3>
<p>src/pages/admin/roles/services/roles.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> request <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;@/utils/request&apos;</span>;
<span class="hljs-keyword">import</span> querystring <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;querystring&apos;</span>;
<span class="hljs-keyword">const</span> ENTITY = <span class="hljs-string">&apos;role&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">list</span>(<span class="hljs-params">pageNum, pageSize, where</span>) </span>{
    <span class="hljs-keyword">let</span> wherestring = querystring.stringify(where);
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>?pageNum=<span class="hljs-subst">${pageNum}</span>&amp;pageSize=<span class="hljs-subst">${pageSize}</span>&amp;<span class="hljs-subst">${wherestring}</span>`</span>);
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getResource</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/getResource`</span>);
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUser</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/getUser`</span>);
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>`</span>, {
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">headers</span>: {
            <span class="hljs-string">&quot;Content-Type&quot;</span>: <span class="hljs-string">&quot;application/json&quot;</span>
        },
        <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify(values)
    });
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setResource</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/setResource`</span>, {
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">headers</span>: {
            <span class="hljs-string">&quot;Content-Type&quot;</span>: <span class="hljs-string">&quot;application/json&quot;</span>
        },
        <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify(values)
    });
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setUser</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/setUser`</span>, {
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">headers</span>: {
            <span class="hljs-string">&quot;Content-Type&quot;</span>: <span class="hljs-string">&quot;application/json&quot;</span>
        },
        <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify(values)
    });
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">update</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/<span class="hljs-subst">${values.id}</span>`</span>, {
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;PUT&apos;</span>,
        <span class="hljs-attr">headers</span>: {
            <span class="hljs-string">&quot;Content-Type&quot;</span>: <span class="hljs-string">&quot;application/json&quot;</span>
        },
        <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify(values)
    });
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">del</span>(<span class="hljs-params">id</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/<span class="hljs-subst">${id}</span>`</span>, {
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;DELETE&apos;</span>
    });
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">delAll</span>(<span class="hljs-params">ids</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/<span class="hljs-subst">${ids[<span class="hljs-number">0</span>]}</span>`</span>, {
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;DELETE&apos;</span>,
        <span class="hljs-attr">headers</span>: {
            <span class="hljs-string">&quot;Content-Type&quot;</span>: <span class="hljs-string">&quot;application/json&quot;</span>
        },
        <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify(ids)
    });
}
</code></pre>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
